<template>
  <Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
    <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
      <!-- <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" /> -->
      <span
        class="inline-block w-6 h-6 rounded-3xl text-center bg-gray-400 mr-3 leading-6 text-[14px]"
      >
        {{ getUserInfo?.username?.slice(0, 1) }}
      </span>
      <span :class="`${prefixCls}__info hidden md:block`">
        <span :class="`${prefixCls}__name  `" class="truncate">
          {{ getUserInfo.username }}
          <span v-if="authorityItem.roleName">({{ authorityItem.roleName }})</span>
        </span>
      </span>
    </span>

    <template #overlay>
      <Menu @click="handleMenuClick">
        <MenuItem
          key="doc"
          :text="t('layout.header.dropdownItemDoc')"
          icon="ion:document-text-outline"
          v-if="getShowDoc"
        />
        <MenuDivider v-if="getShowDoc" />
        <MenuItem
          v-if="getUseLockPage"
          key="lock"
          :text="t('layout.header.tooltipLock')"
          icon="ion:lock-closed-outline"
        />
        <MenuItem v-for="item in authorityList" :key="item.roleId" :text="item.roleName" />
        <MenuItem
          key="changePassword"
          text="修改密码"
          icon="material-symbols-light:change-circle-outline"
        />
        <MenuItem
          key="logout"
          :text="t('layout.header.dropdownItemLoginOut')"
          icon="ion:power-outline"
        />
      </Menu>
    </template>
  </Dropdown>
  <LockAction @register="register" />

  <!-- 修改密码 -->
  <a-modal width="35%" v-model:visible="changePasswdVisible" title="修改密码" footer="">
    <Password page-title="修改密码" @successPwd="successPwd" content="" />
  </a-modal>
</template>
<script lang="ts">
// components
import { Dropdown, Menu } from 'ant-design-vue'

import { defineComponent, computed, ref } from 'vue'
import Password from '/@/views/sys/password/index.vue'

import { DOC_URL } from '/@/settings/siteSetting'

import { useUserStore } from '/@/store/modules/user'
import { usePermissionStore } from '/@/store/modules/permission'
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'
import { useI18n } from '/@/hooks/web/useI18n'
import { useDesign } from '/@/hooks/web/useDesign'
import { useModal } from '/@/components/Modal'

import headerImg from '/@/assets/images/header.jpg'
import { propTypes } from '/@/utils/propTypes'
import { openWindow } from '/@/utils'

import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'

type MenuEvent = 'logout' | 'doc' | 'lock' | 'changePassword'

export default defineComponent({
  name: 'UserDropdown',
  components: {
    Dropdown,
    Menu,
    MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
    MenuDivider: Menu.Divider,
    LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
    Password,
  },
  props: {
    theme: propTypes.oneOf(['dark', 'light']),
  },
  setup() {
    const { prefixCls } = useDesign('header-user-dropdown')
    const { t } = useI18n()
    const { getShowDoc, getUseLockPage } = useHeaderSetting()
    const userStore = useUserStore()

    const getUserInfo = computed(() => {
      const { jsxm, avatar } = userStore.getUserInfo || {}
      return { username: jsxm, avatar: avatar || headerImg }
    })

    const authorityList = computed(() => userStore.getAuthority)
    const authorityItem = computed(() => userStore.getAuthorityItem || {})

    const [register, { openModal }] = useModal()

    function handleLock() {
      openModal(true)
    }

    //  login out
    function handleLoginOut() {
      userStore.confirmLoginOut()
    }

    const changePasswdVisible = ref(false)
    // change Password
    function handleChangePassword() {
      changePasswdVisible.value = true
    }

    function successPwd() {
      changePasswdVisible.value = false
    }

    // open doc
    function openDoc() {
      openWindow(DOC_URL)
    }

    function handleMenuClick(e: { key: MenuEvent }) {
      switch (e.key) {
        case 'changePassword':
          handleChangePassword()
          break
        case 'logout':
          handleLoginOut()
          break
        case 'doc':
          openDoc()
          break
        case 'lock':
          handleLock()
          break
        default:
          if (userStore.getAuthorityItem.roleId == e.key) break

          let arr = authorityList.value.filter(item => item.roleId == e.key)

          const permissionStore = usePermissionStore()
          permissionStore.setDynamicAddedRoute(false)
          if (arr.length) {
            userStore.setAuthorityItem(arr[0])
            userStore.afterLoginAction(true)
          }
      }
    }

    return {
      prefixCls,
      t,
      getUserInfo,
      authorityList,
      handleMenuClick,
      getShowDoc,
      register,
      getUseLockPage,
      authorityItem,
      changePasswdVisible,
      successPwd,
    }
  },
})
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-header-user-dropdown';

.@{prefix-cls} {
  height: @header-height;
  padding: 0 0 0 10px;
  padding-right: 10px;
  overflow: hidden;
  font-size: 12px;
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: flex-end;

  img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }

  &__header {
    border-radius: 50%;
  }

  &__name {
    font-size: 14px;
  }

  &--dark {
    &:hover {
      background-color: @header-dark-bg-hover-color;
    }
  }

  &--light {
    &:hover {
      background-color: @header-light-bg-hover-color;
    }

    .@{prefix-cls}__name {
      color: @text-color-base;
    }

    .@{prefix-cls}__desc {
      color: @header-light-desc-color;
    }
  }

  &-dropdown-overlay {
    .ant-dropdown-menu-item {
      min-width: 160px;
    }
  }
}
</style>
